let box = document.querySelector('.box')
let pox = document.querySelector('.pox')
let aCont = document.querySelectorAll('.api-cont1 a')
aCont.forEach(function (dom) {
    // 鼠标点击时,改变对应搜素框内容
    dom.addEventListener('click', function () {
        box.textContent = dom.textContent
        pox.value = dom.textContent
        // console.log(1)
    })
})



// 顶部数据渲染
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ]

//   数据是数组,所以需要先遍历
// 先定义一下来保存
let apiHtml='';
let apiCont11=document.querySelector('.api-cont11')
apiTypeData.forEach(function(v){
// console.log(v)
// if(v.isnew){
//     apiHtml+=`
//     <a href="#" class="active">${v.name}</a>
//     `
// }else{
//     apiHtml+=`
//     <a href="#">${v.name}</a>
//     `
// }

apiHtml+=`
    <a href="#" class="${v.isnew? 'active':''}" data-keyword="${v.keyword}">${v.name}</a>
    `
apiCont11.innerHTML=apiHtml

})

// 需求:点击后,改变相应的内容
// 事件委派
// e.target为点击的那个对象
let boxx=document.querySelector('.boxx')
let poxx=document.querySelector('.poxx')
apiCont11.addEventListener('click',function(e){
if(e.target.nodeName==='A'){
    boxx.textContent= e.target.textContent
    
    let keyword=e.target.dataset.keyword
    poxx.placeholder=keyword
}
})


//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]
// 先遍历数组
let apiCont3=document.querySelector('.api-cont3')
let liHtml=''
listDataArr.forEach(function(v){
// console.log(v)
liHtml+=`
<li>
        <span class="company ${v.isSpecial ? 'isShow':''}">企业专用</span>
          <div class="start">
          <img src="../imgs/${v.img}">
          <P>${v.name}</P>
          <p class="api-cont3-p ${v.price==='免费'? 'green':'red'}">${v.price}</p>
        </div>
          <button class="request">申请数据</button>
      </li>
`
// console.log(liHtml)
})
apiCont3.innerHTML=liHtml


// 模态框设置
// 获取元素
// 点击按钮显示蒙层
// 由于是未来才添加的数据,所以需要用事件委派来实现,
// 给父级设置点击事件
let mask=document.querySelector('.mask')
let modal=document.querySelector('.modal')
// let request=document.querySelectorAll('.request')
// request.forEach(function(dom){
//     dom.addEventListener('click',function(){
// // mask.style.display='block'
// console.log(1)

//     })
// })

apiCont3.addEventListener('click',function(e){
    // console.log(e.target.className==='request')
// 如果是两个类名就用:classList.contains是否包含
    if(e.target.className==='request'){
      e.stopPropagation()
      mask.style.display='block'
    }else{
      location.href='../page/apidetails.html'
    }
})
mask.addEventListener('click',function(){
  mask.style.display='none'
})
// 点击阻止冒泡
modal.addEventListener('click',function(e){
e.stopPropagation();
})

// 调用选项卡
tab('.menu a','.menu-cont .menu-conts')

